// var lis = document.querySelectorAll("#nav li");
// var divs = document.querySelectorAll("#content>div")
// for (var i = 0; i < lis.length; i++) {
//   lis[i].index = i;
//   lis[i].onclick = function () {
//     for (var j = 0; j < lis.length; j++) {
//       lis[j].className = ""
//       divs[j].style.display = "none"
//     }
//     this.className = "active";
//     divs[this.index].style.display = "block"
//   }
// }

function Tab (wrap) {
  this.wrap = document.querySelector(wrap) //wrap #tab
  this.lis = this.wrap.querySelectorAll("ul li");//导航
  this.divs = this.wrap.querySelectorAll("#content>div");//切换的div
  this.init();//实例化对象  直接调用初始化绑定事件
}
// 初始化tab
Tab.prototype.init = function () {
  var that = this; //存储本构造函数的this
  this.lis[0].className = "active"
  for (var i = 0; i < this.lis.length; i++) {
    this.lis[i].index = i;
    this.lis[i].onclick = function () {
      // 切换函数
      that.change(this);
    }
  }
}
// 切换函数
Tab.prototype.change = function (ele) {
  for (var j = 0; j < this.lis.length; j++) {
    this.lis[j].className = ""
    this.divs[j].style.display = "none"
  }
  ele.className = "active";
  this.divs[ele.index].style.display = "block";
}
